<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">

</head>
<body>
<!-- 内容主体区域 -->
<div style="padding: 30px;">
    <div class="layui-row layui-col-space15" >
        <div class="layui-panel" style="padding: 10px;height: 40px">
        <form action="/amin/user/getUserList">
            <div class="layui-col-md3">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="userName" name="userName" th:field="${user.userName}"  placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-input-block">
                    <!--<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>-->
                    <button class="layui-btn" lay-submit lay-filter="formSubmit">查询</button>
                </div>
            </div>
        </form>
        </div>
    </div>
    <br>
    <div id="addButton" class="layui-col-md12" style="margin-top: 10px;">
        <button data-method="addData" class="layui-btn">添加</button>
    </div>

    <div class="layui-col-md12">
        <table class="layui-table" id="tebleList">
            <colgroup>
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
<!--
                <col width="150">
-->
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名称</th>
                <th>昵称</th>
                <th>性别</th>
                <th>状态</th>
                <!--<th>部门名称</th>-->
                <th>角色名称</th>
                <th>创建时间</th>
                <th>管理</th>
            </tr>
            </thead>
            <tbody th:each="user,userStat:${userList.list}">
            <tr>
                <td th:text="${userStat.index+1}"></td>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.userNick}"></td>
                <td>
                    <button th:each="dictState,dictStateStat:${systemUserType}" th:if="${user.sex == dictState.dictKey}" th:text="${dictState.dictTitle}" th:class="${dictState.dictStyle}"></button>
                </td>
                <td>
                    <button th:each="dictState,dictStateStat:${systemSwitchType}" th:if="${user.enable == dictState.dictKey}" th:text="${dictState.dictTitle}" th:class="${dictState.dictStyle}"></button>
                </td>
                <!--<td th:each="depList:${depList}" th:if="${user.depId == depList.id}"th:text="${depList.depName}"></td>-->
                <td th:each="roleList:${roleList}" th:if="${user.roleId == roleList.id}" th:text="${roleList.roleName}"></td>
                <td th:text="${#dates.format(user.createdTime,'yyyy-MM-dd')}"></td>
                <td>
                    <button  th:data-value="${user.id}"   data-method="editData" class="layui-btn layui-btn-sm layui-btn-normal">编辑</button>
                    <button  th:data-value="${user.id}"   data-method="delData" class="layui-btn layui-btn-sm layui-btn-normal layui-bg-red">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-box layui-laypage layui-laypage-molv" id="page_up_next">
            <button type="button" th:data-value="${userList.pageNum -1}" data-method="upPage" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">上一页</button>
            <button type="button" th:data-value="${userList.pageNum +1}" data-method="nextPage" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">下一页</button>
        </div>
        &emsp;&emsp;总<span th:text="${userList.total}"></span>条
    </div>
</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>

<script>
    layui.use(function(){
        var layer = layui.layer
            ,form = layui.form;
        var href = "/amin/user/createUser";
        var pageUrl = '/amin/user/getUserList?pageNum=';
        var id = 0;
        var pageNum = 1;
        var active = {
            addData: function(){
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    ,title: '添加用户'
                    ,area: ['100%', '100%']
                    ,shade: 0
                    ,maxmin: true
                    ,offset: [ //为了演示，随机坐标
                        0,0
                    ]
                    ,content: href
                    ,zIndex: layer.zIndex //重点1
                    ,success: function(layero, index){
                        layer.addData(layero); //重点2. 保持选中窗口置顶

                        //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                        layer.escIndex = layer.escIndex || [];
                        layer.escIndex.unshift(index);
                        //选中当前层时，将当前层索引放置在首位
                        layero.on('mousedown', function(){
                            var _index = layer.escIndex.indexOf(index);
                            if(_index !== -1){
                                layer.escIndex.splice(_index, 1); //删除原有索引
                            }
                            layer.escIndex.unshift(index); //将索引插入到数组首位
                        });
                    }
                    ,end: function(){
                        //更新索引
                        if(typeof layer.escIndex === 'object'){
                            layer.escIndex.splice(0, 1);
                        }
                    }
                });
            }
            ,editData: function(){
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    ,title: '编辑用户'
                    ,area: ['100%', '100%']
                    ,shade: 0
                    ,maxmin: true
                    ,offset: [ //为了演示，随机坐标
                        0,0
                    ]
                    ,content: href+"?id="+id
                    ,zIndex: layer.zIndex //重点1
                    ,success: function(layero, index){
                        layer.editData(layero); //重点2. 保持选中窗口置顶
                        //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                        layer.escIndex = layer.escIndex || [];
                        layer.escIndex.unshift(index);

                        //选中当前层时，将当前层索引放置在首位
                        layero.on('mousedown', function(){
                            var _index = layer.escIndex.indexOf(index);
                            if(_index !== -1){
                                layer.escIndex.splice(_index, 1); //删除原有索引
                            }
                            layer.escIndex.unshift(index); //将索引插入到数组首位
                        });
                    }
                    ,end: function(){
                        //更新索引
                        if(typeof layer.escIndex === 'object'){
                            layer.escIndex.splice(0, 1);
                        }
                    }
                });
            },delData: function(){
                var that = this;
                layer.confirm('确定要删除这条数据吗?', {icon: 3, title:'提示'}, function(index){
                    window.location.href =window.document.location.origin+"/amin/user/delById?id="+id;
                    layer.close(index);
                });
            },upPage: function(){
                if(null != $("#userName").val()){
                    pageNum =pageNum+"&userName="+$("#userName").val();
                }
                var that = this;
                window.location.href =window.document.location.origin+pageUrl+pageNum ;
            },nextPage: function(){
                if(null != $("#userName").val()){
                    pageNum = pageNum+"&userName="+$("#userName").val();
                }
                var that = this;
                window.location.href =window.document.location.origin+pageUrl+pageNum ;
            }
        };

        $('#addButton .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#tebleList .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            id = othis.data('value');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#page_up_next .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            pageNum = othis.data('value');
            active[method] ? active[method].call(this, othis) : '';
        });
        //监听提交
        form.on('submit(formSubmit)', function(data){
            //layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
</script>
</html>